<template>
  <div id="views">
    <div class="container">
      <section id="sec1">
        <p>
          <span class="title">矿机名称</span>
          <span class="val name machineName">{{machine.productName}}</span>
        </p>
        <p>
          <span class="title">BTC算力</span>
          <span class="val toatlPower">{{machine.basePower}}T</span>
        </p>
        <p v-if="machine.bhpPower > 0">
          <span class="title">BHP参配算力</span>
          <span class="val toatlPower">{{machine.bhpPower}}T</span>
        </p>
        <p v-if="machine.bhpPower > 0">
          <span class="title">到手BHP参配算力</span>
          <span class="val toatlPower">{{machine.bhpPower}}</span>
        </p>
        <p>
          <span class="title">预计每日电费</span>
          <span class="val">
            <span class="btcUnit btcUnitPrice">{{btc_electric_price}}</span> BTC
            <span class="priceBox">≈
              <span class="unitPrice cnyUnitPrice">{{this.sliceNum(defaultSelPayTypePrice , sliceNumLen )}}</span>
              <span class="priceType">{{defaultPayType}}</span>
            </span>
          </span>
        </p>
      </section>
      <section id="sec2">
        <p>
          <span class="title">合约包剩余天数</span>
          <span class="val leastDays">{{toEnd}}天</span>
        </p>
        <p>
          <span class="title">电费包剩余</span>
          <span class="val leastDays2">{{eToEnd}}天</span>
        </p>
      </section>
      <section id="sec3">
        <p class="sec3_title">充值天数</p>
        <div class="add_days">
          <input type="number" v-model="inputDays" id="input_days" pattern="[0-9]*" placeholder="请输入充值天数">
          <span class="afterInput">剩余天数<span>{{leftPowerDays}}</span></span>
        </div>
        <div class="text_content electric_predicts">
          <span v-for="(item,index) in predicts" v-if="item.predict != 1">
            充值天数≥{{item.days}} 享
            <span class="icon"><span class="more60">{{item.predict}}</span>折</span>
          </span>
        </div>
      </section>
      <section id="sec4">
        <p class="sec4_title">选择支付方式</p>
        <label for="wallet">
          <input type="radio" v-model="defaultPayType" name="payType" value="CNY" id="wallet" checked>
          <span class="check"></span>
          <span class="icon"><img src="../../common/imgs/wallet.png" alt=""> </span>
          <span class="payName">现金钱包</span>
          <span class="leastMoney">可用：<span class="cnyMoney">{{left_CNY}}</span></span>
        </label>
        <label for="usdt">
          <input type="radio" v-model="defaultPayType"  name="payType" value="USDT" id="usdt">
          <span class="check"></span>
          <span class="icon"><img src="../../common/imgs/usdt.png" alt=""></span>
          <span class="payName">USDT</span>
          <span class="leastMoney">可用：<span class="usdtMoney">{{left_USDT}}</span></span>
        </label>
      </section>
      <div id="payArea">
        <span class="price">总计金额</span>
        <span class="totalMoney">{{totalMoney}}{{defaultPayType}}</span>
        <span id="submit" class="hoverhand" @click="submit">立即支付</span>
      </div>
    </div>
    <dia-log ref="dl" confirmBtn="确定充值" msg="您当前充值天数＜合约包剩余总天数当电费用完时，矿机将停机没有产出请关注电费包剩余情况，及时充值" @confirm="confirmAddElectric"></dia-log>
  </div>
</template>
<script>
  import { addElectric , leftMoney } from '../../http/api'
  export default {
    name : 'no_electric_add_electric',
    data(){
      return{
        addDays : [],
        insuranceContract : '',//协议内容
        predict_electricity_cny : '',//CNY电费单价
        predict_electricity_usdt : '',//usdt电费单价
        defaultSelPayTypePrice : '',//默认选择的支付方式的单价
        btc_electric_price : '',//btc价格根据CNY价格折算
        electricity_config : '',//天数打折优惠
        predict_days : '',//天数数组
        predicts : [],   //打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
        order_id : '',//订单id
        handsPower : '',//到手总算力
        machine : '',//矿机数据
        toEnd : '',//合约包剩余天数
        eToEnd : '',//电费剩余天数
        leastPowerDays : '',//合约包除开电费天数的剩余天数
        leftPowerDays : '',//合约包除开电费天数的剩余天数
        inputDays : '',//充值天数
        defaultPayType : 'CNY',//默认支付方式
        totalMoney : '0',
        left_USDT : '',//usdt余额
        left_CNY : '',//cny余额
        sliceNumLen : 2,//显示钱截取位数
      }
    },
    components:{
      DiaLog: resolve => { require(['../../components/dialog'], resolve) },
      // tongdunCountdown : resolve => { require(['../../components/tongdunCountdown'],resolve) },//同盾倒计时功能插件
    },
    mounted() {
      let query = this.$route.query,
        thiz = this,
        machine = JSON.parse( query.machine );
      thiz.insuranceContract = machine.insuranceContract;//协议内容
      thiz.predict_electricity_cny = machine.predict_electricity_cny;  //CNY电费单价
      thiz.predict_electricity_usdt = machine.predict_electricity_usdt;//usdt电费单价
      thiz.defaultSelPayTypePrice = thiz.predict_electricity_cny;//默认选择的支付方式的单价

      thiz.btc_electric_price = thiz.sliceNum(thiz.accDiv(thiz.predict_electricity_cny, machine.btcPrice), 8);
      thiz.electricity_config = machine.electricity_config;
      thiz.predict_days = Object.keys(thiz.electricity_config);
      function sortNumber(a, b) {//升序
        return a - b
      }
      thiz.predict_days.sort(sortNumber);
      let predicts = [];    //打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
      for (let i = 0; i < thiz.predict_days.length; i++) {
        predicts.push({
          days: thiz.predict_days[i],
          predict: thiz.accSub(1, thiz.electricity_config[thiz.predict_days[i]]),
        })
      }
      thiz.predicts = predicts;//打折优惠[{days:60 , predict : 0.05}] 根据天数升序排序
      thiz.order_id = query.order_id;//订单id
      thiz.handsPower = query.handsPower;//到手总算力
      thiz.machine = machine;
      thiz.eToEnd = machine.eToEnd;
      thiz.toEnd = machine.toEnd;
      thiz.leastPowerDays = thiz.accSub( machine.toEnd, machine.eToEnd);//合约包除开电费天数的剩余天数
      thiz.leftPowerDays =  thiz.leastPowerDays;//合约包除开电费天数的剩余天数
      // thiz.leastPowerDays = 100;//合约包除开电费天数的剩余天数
      // thiz.leftPowerDays = thiz.leastPowerDays;//合约包除开电费天数的剩余天数
      thiz.getAsset();
    },
    watch:{
      inputDays(val){
        var thiz = this;
        let inputDays = parseInt(val);
        if (inputDays > thiz.leastPowerDays) {
          inputDays = thiz.leastPowerDays;
        }
        if(isNaN(inputDays)){
          return;
        }
        inputDays = isNaN(inputDays) ? 0 : inputDays;
        thiz.inputDays = inputDays;
        let eToEnd = thiz.eToEnd;
        var eletricDays = thiz.accAdd(inputDays, eToEnd);//电费天数
        eletricDays = isNaN(eletricDays) ? eToEnd : eletricDays;
        thiz.leftPowerDays = thiz.accSub(thiz.toEnd, eletricDays);
        if (inputDays && inputDays > 0) {
          thiz.mathTotalPrice();
        }
      },
      defaultPayType(defaultPayType){
        this.defaultSelPayTypePrice = defaultPayType === 'CNY'  ?  this.predict_electricity_cny : this.predict_electricity_usdt;
        this.sliceNumLen = defaultPayType === 'CNY' ?  2 : 4;
        this.mathTotalPrice();
      }
    },
    methods:{
      getAsset(){
        //获取可用余额
        let thiz =this;
        leftMoney().then(res => {
          if( res.code == 200 ){
            let payList = res.data.lists;
            thiz.left_CNY = thiz.sliceNum(payList.CNY, 2);
            thiz.left_USDT = thiz.sliceNum(payList.USDT, 4);
          }
        })
      },
      mathTotalPrice() {
        let thiz = this;
        let sliceNum = thiz.sliceNumLen;
        let machine = thiz.machine;
        let totalMoney = 0;
        let inputDays = thiz.inputDays;//输入天数
        if (!inputDays && inputDays < 1) {
          inputDays = 0;
        }
        let predict_days = thiz.predict_days,
          electricity_config = thiz.electricity_config;
        let defaultSelPayTypePrice = Number(thiz.machine.electric_price[thiz.defaultPayType]);//每小时电价
        totalMoney = thiz.accMoreMul(
          machine.mine_power , '24' , machine.computingPower , machine.num , defaultSelPayTypePrice , inputDays
        );
        for (let i = predict_days.length - 1; i >= 0; i--) {
          if (inputDays >= predict_days[i]) {
            totalMoney = thiz.accMul(totalMoney, thiz.accSub(1, electricity_config[predict_days[i]]));
            //打折计算电费
            break;
          }
        }
        totalMoney = totalMoney > 0 ? thiz.sliceNum(totalMoney, sliceNum) : '0';
        thiz.totalMoney = totalMoney;
      },
      confirmAddElectric() {
        let thiz = this,
          totalMoney = thiz.totalMoney,
          defaultPayType = thiz.defaultPayType;
        if( Number(totalMoney) > Number(thiz['left_'+defaultPayType] ) ){
          let text = defaultPayType === 'CNY' ? '现金钱包' : 'USDT';
          require('../../common/js/toast').toast(text + '可用余额不足，请充值');
          return;
        }
        addElectric({
          order_id: thiz.order_id,
          days_num: thiz.inputDays,
          site: 1,
          currency: thiz.defaultPayType
        }).then(res => {
          if( res.code == 200){
            require('../../common/js/toast').toast('充值成功');
            thiz.$router.go(-1);
          }
        })
      },
      submit(){
        let thiz = this,
          leftPowerDays = Number(thiz.leftPowerDays),
          inputDays = Number(thiz.inputDays),
          toEnd = Number(thiz.toEnd),
          eToEnd = Number(thiz.eToEnd),
          toast = require('../../common/js/toast').toast;
        if (toEnd == 0) {
          toast('合约剩余天数为0不可以充值');
          return;
        }
        if (inputDays && inputDays > 0) {
          if (leftPowerDays > 0) {
            thiz.$refs.dl.dialogShow();
          } else {
            thiz.confirmAddElectric();
          }
        } else {
          if( eToEnd == toEnd){
            toast('电费包剩余时间已足够');
          }else{
            toast('请输入充值天数');
          }
        }
      },
    }
  }
</script>
<style type="text/less" lang="less" scoped>
  .width100 {
    width: 100%;
  }

  .container {
    min-height: 100%;
    background: #fff;
    color: #262626;
  }

  .textCenter {
    text-align: center
  }

  img {
    font-size: 0;
  }

  #sec1 .title,
  #sec2 .title {
    font-size: 0.28rem;
    color: #999999;
    line-height: 0.3rem;
  }

  #sec1 .val,
  #sec2 .val {
    font-size: 0.28rem;
    color: #262626;
    float: right;
    line-height: 0.3rem;
  }

  #sec1,
  #sec2,
  #sec3,
  #sec4 {
    padding: 0 0.3rem;
    padding-bottom: 0.35rem;
  }

  #sec1>p {
    padding-top: 0.35rem;
    overflow: hidden;
  }

  #sec1>p .priceBox {
    color: #898989;
    font-size: 0.22rem;
  }

  #sec2 {
    border-top: 0.16rem solid#F8F8F8;
  }

  #sec2>p {
    padding-top: 0.4rem;
  }

  #sec2>p .leastDays2 {
    color: #F67311;
  }

  #sec2 {
    padding-bottom: 0.4rem;
  }

  #sec3 {
    border-top: 0.16rem solid#F8F8F8;
  }

  #sec3>.sec3_title {
    font-size: 0.3rem;
    color: #262626;
    padding: 0.29rem 0;
    padding-bottom: 0.2rem;
  }

  .add_days {
    height: 0.83rem;
    position: relative;
  }

  .add_days>.afterInput {
    float: right;
    color: #F19B05;
    font-size: 0.28rem;
    line-height: 0.83rem;
    display: block;
    text-align: right;
    height: 0.83rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: #fff;
  }

  #input_days::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.32rem;
    font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
  }

  #input_days {
    height: 100%;
    border: 0;
    font-size: 0.32rem;
    width: calc(100% - 1.3rem);
  }

  .text_content {
    overflow: hidden;
    border-top: 0.015rem solid#EEEEEE;
  }

  .text_content>span {
    padding-top: 0.26rem;
    color: #898989;
    font-size: 0.22rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }

  .text_content>span:nth-child(2n+1) {
    width: 60%;
    display: block;
    float: left;
  }

  .text_content>span:nth-child(2n+2) {
    width: 40%;
    display: block;
    float: left;
  }

  .text_content>span>.icon {
    margin-left: 0.05rem;
    color: #fff;
    font-size: 0.18rem;
    background: linear-gradient(to right, #FB6A3E, #FF8A50);
    /* 标准的语法 */
    background: -webkit-linear-gradient(to right, #FB6A3E, #FF8A50);
    /* 标准的语法 */
    line-height: 0.25rem;
    padding: 0 0.1rem;
    border-radius: 0.08rem;
  }

  #sec4 {
    border-top: 0.16rem solid#F8F8F8;
  }

  .sec4_title {
    color: #999999;
    font-size: 0.24rem;
    padding: 0.24rem 0;
    line-height: 100%;
  }

  #sec4 label {
    position: relative;
    height: 1.04rem;
    border-top: 0.015rem solid#EEEEEE;
    display: block;
    padding-left: 0.67rem;
  }

  #sec4 label .icon,
  #sec4 label .icon>img {
    width: 0.5rem;
    height: 0.5rem;
    display: inline-block;
  }

  #sec4 label .icon {
    position: absolute;
  ;
    z-index: 1;
    left: 0;
    top: 50%;
    margin-top: -0.25rem;
  }

  #sec4 label .payName {
    font-size: 0.28rem;
    line-height: 1.04rem;
    display: inline-block;
    width: 2.2rem;
  }

  #sec4 label .leastMoney {
    color: #898989;
    font-size: 0.24rem;
    line-height: 1.04rem;
  }

  #sec4 label .check {
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.18rem;
    z-index: 1;
    border: 0.015rem solid#D2D2D2;
  }

  #sec4 label input:checked+.check {
    background: url("../../common/imgs/blackradio.png") center center;
    background-size: cover;
    border: 0;
  }

  #sec4 label {
    input {
      opacity: 0;
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    input:hover{
      cursor: pointer;
    }
  }

  #sec4 {
    padding-bottom: 2.4rem;
  }

  #agreements {
    display: block;
    padding: 0 0.3rem;
    color: #898989;
    font-size: 0.24rem;
    overflow: hidden;
    padding-left: 0.56rem;
    position: relative;
  }

  #agreements .check {
    width: 0.26rem;
    height: 0.26rem;
    display: inline-block;
    border-radius: 0.04rem;
    border: 0.01rem solid#D2D2D2;
    position: absolute;
    z-index: 1;
    left: 0.3rem;
    top: 0;
  }

  #agreements>span {
    line-height: 100%;
    float: left;
  }

  #agreements>.text {
    padding-left: 0.1rem;
  }

  #agreements em {
    font-style: normal;
    font-size: 0.24rem;
    color: #ffd203;
    line-height: 0.26rem;
  }

  #agreements input {
    position: absolute;
    z-index: 2;
    left: 0.3rem;
    top: 0;
    width: 0.26rem;
    height: 0.26rem;
    opacity: 0;
  }

  #agreements input:checked+.check {
    background: url("../../common/imgs/blackradio.png");
    background-size: cover;
    border: 0;
  }

  #payArea {
    position: fixed;
    z-index: 3;
    left: 0;
    bottom: 0;
    height: 1rem;
    border-top: 0.015rem solid#eee;
    width: 100%;
    padding-left: 0.34rem;
    background: #fff;
    overflow: hidden;
  }
  @media screen and (min-width: 1025px) {
    #payArea{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }
  #payArea .price {
    font-size: 0.26rem;
    line-height: 1rem;
    float: left;
  }

  #payArea .totalMoney {
    color: #F67311;
    font-size: 0.3rem;
    line-height: 1rem;
    float: left;
    padding-left: 0.2rem;
  }

  #payArea #submit {
    float: right;
    height: 100%;
    background: #ffd203;
    width: 3.09rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.3rem;
  }

  .agreementsBox>span:first-child {
    display: inline-block;
    padding-bottom: 0.1rem;
  }
  </style>
</style>
